<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card v-loading="hasChangeBGP1" class="box-card">
        <div slot="header" class="clearfix">
          <span>背景模块</span>
        </div>
        <mallki class-name="mallki-text" :text="this.imgText1" />
        <el-carousel :interval="4000" type="card" height="500px">
          <el-carousel-item v-for="item in siteForm.backgrounds" :key="item">
            <el-image :src="item" class="image" @click="changeBGP({'key':'background','value':item})" />
          </el-carousel-item>
        </el-carousel>
        <mallki class-name="mallki-text" text="手动设置" />
        <div style="margin-top: 15px;">
          <el-input v-model="siteForm.background" placeholder="请输入图片地址">
            <el-button slot="append" @click="changeBGP({'key':'background','value':siteForm.background})">
              更新
              <i class="el-icon-upload el-icon--right" />
            </el-button>
          </el-input>
        </div>
      </el-card>
    </el-row>

    <el-row :gutter="20" style="margin-top:50px;">
      <el-col :span="12">
        <el-card v-loading="hasChangeBGP2" class="box-card">
          <div slot="header" class="clearfix">
            <span>头像模块</span>
          </div>
          <mallki class-name="mallki-text" :text="this.imgText2" />
          <el-carousel :interval="4000" type="card" height="300px" width="300px">
            <el-carousel-item v-for="item in siteForm.avatars" :key="item">
              <el-image :src="item" class="image" @click="changeBGP({'key':'avatar','value':item})" />
            </el-carousel-item>
          </el-carousel>
          <mallki class-name="mallki-text" text="手动设置" />
          <div style="margin-top: 15px;">
            <el-input v-model="siteForm.avatar" placeholder="请输入图片地址">
              <el-button slot="append" @click="changeBGP({'key':'avatar','value':siteForm.avatar})">
                更新
                <i class="el-icon-upload el-icon--right" />
              </el-button>
            </el-input>
          </div>
          <div style="margin-top: 15px;">

            <mallki class-name="mallki-text" style="margin-bottom: 10px;" text="资源上传" />
            <el-upload class="upload-demo" ref="upload" action="https://upload-z2.qiniup.com"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :auto-upload="false" :limit="1"
              :accept="'image/*'" :data="form" list-type="picture-card">
              <i class="el-icon-upload"></i>
              <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
            </el-upload>
            <el-radio-group v-model="radio" style="margin-top: 40px;">
              <el-radio :label="0">背景</el-radio>
              <el-radio :label="1">头像</el-radio>
              <el-radio :label="2">聚焦</el-radio>
              <el-radio :label="3">其他</el-radio>
            </el-radio-group>
            <br>
            <el-tooltip class="item" effect="dark" content="注意不要忘记选择图片类型～" placement="bottom">
              <el-button style="margin-top: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            </el-tooltip>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card v-loading="hasChangeBGP3" class="box-card">
          <div slot="header" class="clearfix">
            <span>站点模块</span>
          </div>
          <el-form ref="form" :model="siteForm" label-width="80px">
            <el-form-item label="站点名称">
              <el-col :span="8">
                <el-input v-model="siteForm.name" maxlength="10" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="标语">
              <el-col :span="20">
                <el-input v-model="siteForm.slogan" maxlength="20" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="声明">
              <el-col :span="20">
                <el-input v-model="siteForm.notice" maxlength="35" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="个性签名">
              <el-col :span="20">
                <el-input v-model="siteForm.desc" maxlength="20" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="个人网址">
              <el-col :span="20">
                <el-input v-model="siteForm.domain" maxlength="40" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="QQ">
              <el-col :span="20">
                <el-input v-model="siteForm.qq" maxlength="100" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="CSDN">
              <el-col :span="20">
                <el-input v-model="siteForm.csdn" maxlength="100" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="Gitee">
              <el-col :span="20">
                <el-input v-model="siteForm.gitee" maxlength="100" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="版权年份">
              <el-col :span="12">
                <el-date-picker v-model="siteForm.time" type="year" placeholder="选择年" />
              </el-col>
            </el-form-item>
            <el-form-item label="备案号">
              <el-col :span="12">
                <el-input v-model="siteForm.icp" maxlength="20" show-word-limit />
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col :span="12">
                <el-button type="primary" @click="onSubmit">立即更新</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import Mallki from '@/components/TextHoverEffect/Mallki'
  import {
    updateConf,
    updateSite,
    getToken,
    getInfo
  } from '../../api/site.js'

  export default {
    name: 'Site',
    components: {
      Mallki
    },
    data() {
      return {
        radio: 3,
        imgType: ['img/banner/', 'img/avatar/', 'img/focus/', 'img/other/'],
        form: {
          token: '',
          key: ''
        },
        isShowUpload: false,
        siteForm: {
          name: '',
          slogan: '',
          notice: '',
          desc: '',
          domain: '',
          time: '',
          resource: '',
          background: '',
          avatar: '',
        },
        imgText1: '点击图片设置为主站背景图片',
        hasChangeBGP1: false,
        imgText2: '点击图片设置为主站头像',
        hasChangeBGP2: false,
        hasChangeBGP3: false,
      }
    },
    mounted() {
      this.initInfo();
    },
    methods: {
      initInfo() {
        getInfo().then(res => {
          this.siteForm = res.data
        }).catch(err => {
          this.$message({
            message: '获取异常',
            type: 'error',
            duration: 5 * 1000
          })
        })
      },

      onSubmit() {
        this.hasChangeBGP3 = true;
        // api
        const data = {
          name: this.siteForm.name,
          slogan: this.siteForm.slogan,
          notice: this.siteForm.notice,
          desc: this.siteForm.desc,
          domain: this.siteForm.domain,
          time: this.siteForm.time,
          icp: this.siteForm.icp,
          qq: this.siteForm.qq,
          csdn: this.siteForm.csdn,
          gitee: this.siteForm.gitee
        }
        updateSite(data).then(res => {
          if (res.code === 20000) {
            this.$message({
              message: res.data,
              type: 'success',
              duration: 5 * 1000
            })
          } else {
            this.$message({
              message: res.data,
              type: 'error',
              duration: 5 * 1000
            })
          }
        }).catch(err => {
          this.hasChangeBGP3 = false
          this.$message({
            message: '更新异常',
            type: 'error',
            duration: 5 * 1000
          })
        })
        this.hasChangeBGP3 = false
      },
      changeBGP(msg) {
        if (msg.value === '') {
          this.$message({
            message: '图片地址不能为空',
            type: 'warning',
            duration: 5 * 1000
          })
          return
        }
        if (msg.key === 'avatar') {
          this.hasChangeBGP2 = true
          this.imgText2 = '头像正在更新...'
          this.siteForm.avatar = msg.value
        } else {
          this.hasChangeBGP1 = true
          this.imgText1 = '背景正在更新...'
          this.siteForm.background = msg.value
        }
        updateConf(msg).then(res => {
          if (res.code === 20000) {
            this.$message({
              message: res.data,
              type: 'success',
              duration: 5 * 1000
            })
            this.siteForm.avatar = msg.value
          } else {
            this.$message({
              message: res.data,
              type: 'warning',
              duration: 5 * 1000
            })
          }
        }).catch(err => {
          this.hasChangeBGP2 = false
          this.hasChangeBGP1 = false
          this.imgText1 = '点击图片设置为主站背景图片'
          this.imgText2 = '点击图片设置为主站头像'
          this.$message({
            message: '更新异常',
            type: 'error',
            duration: 5 * 1000
          })
        })
        if (msg.key == 'avatar') {
          this.hasChangeBGP2 = false
          this.imgText2 = '点击图片设置为主站头像'
        } else {
          this.hasChangeBGP1 = false
          this.imgText1 = '点击图片设置为主站背景图片'
        }
      },
      handleAvatarSuccess(res, file) {
        this.$message({
          message: '上传成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.imageUrl = URL.createObjectURL(file.raw)
        this.form.token = ''
      },
      beforeAvatarUpload: async function(file) {
        await getToken().then(res => {
          if (res.code === 20000) {
            this.form.token = res.data.token
          }
        }).catch(err => {
          this.$message({
            message: 'token异常',
            type: 'error',
            duration: 5 * 1000
          })
        })
        if (this.form.token === '') {

        }
        const isTypeTrue = /^image\/(jpeg|png|jpg)$/.test(file.type);
        const current = new Date().getTime()
        const key = `${this.imgType[this.radio]}${current}_${file.name}` // key为上传后文件名 必填
        const isLt20M = file.size / 1024 / 1024 < 20 // 算出文件大小
        this.fileSize = file.size // 存储文件大小
        if (!isLt20M) { // 这里我们限制文件大小为20M
          this.$message.error('最大只能上传20M!')
          this.$ref.upload.abort()
          return isLt20M
        }
        if (!isTypeTrue) { // 限制文件类型
          this.$ref.upload.abort()
          this.$message.error('只能上传图片!')
          return false
        }
        try {
          // const token = ''
          // this.form.token = token
          this.form.key = key
          return true
        } catch (error) {
          return error
        }
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
    }
  }
</script>

<style>
  .hide .el-upload--picture-card {
    display: none;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .mixin-components-container {
    background-color: #f0f2f5;
    padding: 30px;
    min-height: calc(100vh - 84px);
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .component-item {
    min-height: 100px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .image {
    width: 100%;
    height: 100%;

  }
</style>
